<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品规格名')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-spec-add">
            <div class="form-group">
                <label class="col-sm-2 control-label">规格名称：</label>
                <div class="col-sm-8">
                    <input id="name" name="name" class="form-control" type="text">
                </div>
            </div>
            <!--<div class="form-group">-->
            <!--<label for="type" class="col-sm-2 control-label">显示类型</label>-->

            <!--<div class="col-sm-8">-->
            <!--<input type="hidden"  value="0" id="type" name="type">-->
            <!--<input type="radio" value="1" name="type">图片文字-->
            <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <label for="btnAdd" class="col-sm-2 control-label"></label>

                <div class="col-sm-8">
                    <button id="btnAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>添加规格值</button>
                </div>
            </div>
            <div class="form-group">
                <label for="tab" class="col-sm-2 control-label"></label>
                <div class="col-sm-8">
                    <table id="tab" width="600" border="0" cellspacing="0" cellpadding="0" >
                        <thead>
                        <tr align="center">
                            <td>规格值名称</td>
                            <td width="2"></td>
                            <td  style="display: none">规格值别名</td>
                            <td width="2"></td>
                            <td style="display: none">规格图片</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <TBODY>                  　
                        　
                        </TBODY>
                    </table>
                </div>
            </div>

            <!--<div class="form-group">-->
            <!--<div class="col-sm-8 col-sm-offset-3">-->
            <!--<button type="submit" class="btn btn-primary">提交</button>-->
            <!--</div>-->
            <!--</div>-->
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "system/spec"
        $("#form-spec-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-spec-add').serialize());
            }
        }


        $("#btnAdd").on("click",function(){
            // var t=$('input:radio[name=type]:checked').val();
            // var str="";
            // if(t=='0'){
            //     str='style="display: none"';
            // }
            $("#tab tbody").append('<tr align="center"><td height="45">' +
                '<input type="text" name="spec_value" class="form-control" data-parsley-required="true"></td>' +
                '<td width="2"></td><td  style="display: none"><input type="text" name="spec_alias" class="form-control"></td><td width="2"></td>' +
                // '<td '+str+'><button type="button" class="btn btn-default btn-sm mr5"> ' +
                // '<img src="/img/empty.bmp" style="height: 20px;width: 20px;"> ' +
                // '<input name="spec_picurl" type="hidden" value=""><i class="ti-upload ml5"></i> </button></td>' +
                '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>');
            binEvent();
        });


        function binEvent(){
            $("#tab .up").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.prev();
                if (nextTR.length > 0) {
                    nextTR.insertAfter(p);
                }
            });
            $("#tab .down").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.next();
                if (nextTR.length > 0) {
                    nextTR.insertBefore(p);
                }
            });
            $("#tab .del").unbind("click").on("click",function(){
                var tr=$("#tab tbody").find("tr");
                if (tr.length > 0) {
                    $(this).parent().parent().remove();
                }
            });
            // $("#tab .btn").unbind("click").on("click",function(){
            //     var btn=$(this);
            //     $("#buttom").load( "${base!}/platform/goods/spec/image?w=36&h=36", function( response, status, xhr ) {
            //         $("#imgUploadOK").unbind("click").on("click",function(){
            //             btn.find("img").attr("src",$("#imgUploadPicurl").val());
            //             btn.find("input[type=hidden]").val($("#imgUploadPicurl").val());
            //             $("#imgUpload").modal("hide");
            //         });
            //         $("#imgUpload").modal("show");
            //     });
            // });
        }

    </script>
</body>
</html>